<template>
  <div style="width: 100%" class="contentIcon">
    <a-popover
      trigger="click"
      position="bl"
      @popup-visible-change="showPop"
      v-model:popup-visible="showProp"
      :arrow-style="{
        display: 'none',
      }"
      :content-style="{
        padding: '0px',
      }"
    >
      <a-input
        :placeholder="placeholder"
        v-model="selectedValue"
        allow-clear
        readonly
      >
        <template #prefix>
          <!-- 根据 selectedValue 动态设置前缀图标 -->
          <component :is="selectedValue" :size="20"></component>
        </template>
        <template #suffix>
          <icon-down />
        </template>
      </a-input>
      <template #content>
        <div class="iconContent">
          <div>
            <a-tabs default-active-key="1" @tab-click="changeTab">
              <a-tab-pane key="1" title="线性图标">
                <div style="display: flex; flex-direction: row">
                  <div style="width: 25%">
                    <a-menu
                      @menu-item-click="changeMenu"
                      :style="{ width: '100%', height: '100%' }"
                      :default-selected-keys="getDefaultMenuKeys('1')"
                      show-collapse-button
                    >
                      <template #collapse-icon></template>
                      <a-menu-item key="0_0_0" data-obj="1"
                        >方向指示类图标</a-menu-item
                      >
                      <a-menu-item key="0_0_1" data-obj="2"
                        >提示建议类图标</a-menu-item
                      >
                      <a-menu-item key="0_0_2" data-obj="3"
                        >交互按钮类图标</a-menu-item
                      >
                      <a-menu-item key="0_0_3" data-obj="4"
                        >编辑类图标</a-menu-item
                      >
                      <a-menu-item key="0_0_4" data-obj="5"
                        >影音类图标</a-menu-item
                      >
                      <a-menu-item key="0_0_5" data-obj="6"
                        >商标类图标</a-menu-item
                      >
                      <a-menu-item key="0_0_6" data-obj="7"
                        >通用类图标</a-menu-item
                      >
                    </a-menu>
                  </div>

                  <div style="padding: 20px; padding-top: 5px; flex: 1">
                    <a-row
                      class="grid-demo"
                      :gutter="10"
                      style="cursor: pointer"
                    >
                      <a-col
                        :span="4"
                        v-for="(item, index) in currentList"
                        style="
                          border: 1px solid #f0f0f0;
                          padding: 20px;
                          text-align: center;
                          line-height: 20px;
                        "
                        class="item"
                        @click="selectIcon(item)"
                      >
                        <!-- 添加点击事件处理函数 -->
                        <component
                          class="icon"
                          :is="item"
                          :key="item + index"
                          :size="20"
                        ></component>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" title="面性图标">
                <div style="display: flex; flex-direction: row">
                  <div style="width: 25%">
                    <a-menu
                      @menu-item-click="changeMenu"
                      :style="{ width: '100%', height: '100%' }"
                      :default-selected-keys="getDefaultMenuKeys('2')"
                      show-collapse-button
                    >
                      <template #collapse-icon></template>
                      <a-menu-item key="1_0_0" data-obj="1"
                        >提示建议类图标</a-menu-item
                      >
                      <a-menu-item key="1_0_1" data-obj="2"
                        >交互按钮类图标</a-menu-item
                      >
                      <a-menu-item key="1_0_2" data-obj="3"
                        >影音类图标</a-menu-item
                      >
                      <a-menu-item key="1_0_3" data-obj="4"
                        >商标类图标</a-menu-item
                      >
                      <a-menu-item key="1_0_4" data-obj="5"
                        >通用类图标</a-menu-item
                      >
                    </a-menu>
                  </div>

                  <div style="padding: 20px; padding-top: 5px; flex: 1">
                    <a-row class="grid-demo" :gutter="10">
                      <a-col
                        :span="4"
                        v-for="(item, index) in currentList"
                        style="
                          border: 1px solid #f0f0f0;
                          padding: 20px;
                          text-align: center;
                          line-height: 20px;
                        "
                        class="item"
                      >
                        <component
                          class="icon"
                          :is="item"
                          :key="item + index"
                          :size="20"
                          @click="selectIcon(item)"
                        ></component>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="3" title="多色图标">
                <div style="display: flex; flex-direction: row">
                  <div style="width: 25%">
                    <a-menu
                      @menu-item-click="changeMenu"
                      :style="{ width: '100%', height: '100%' }"
                      :default-selected-keys="getDefaultMenuKeys('3')"
                      show-collapse-button
                    >
                      <template #collapse-icon></template>
                      <a-menu-item key="2_0_0" data-obj="1"
                        >商标类图标</a-menu-item
                      >
                    </a-menu>
                  </div>

                  <div style="padding: 20px; padding-top: 5px; flex: 1">
                    <a-row class="grid-demo" :gutter="10">
                      <a-col
                        :span="4"
                        v-for="(item, index) in currentList"
                        style="
                          border: 1px solid #f0f0f0;
                          padding: 20px;
                          text-align: center;
                          line-height: 20px;
                        "
                        class="item"
                      >
                        <component
                          class="icon"
                          :is="item"
                          :key="item + index"
                          :size="20"
                          @click="selectIcon(item)"
                        ></component>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </template>
    </a-popover>
  </div>
</template>

<script setup>
  import { ref, defineProps, defineEmits, watch, onMounted } from 'vue';
  // 引入数据
  import {
    menuList1,
    menuList2,
    menuList3,
    iconList1,
    iconList2,
    iconList3,
  } from './icons';
  const showProp = ref(false);
  const currentList = ref(iconList1[0]); // 初始化显示线性图标中的第一个菜单对应的图标列表
  const activeTab = ref('1'); // 记录当前激活的 tab

  // 切换 tab
  function changeTab(key) {
    activeTab.value = key;
    let defaultMenuKey;
    if (key === '1') {
      defaultMenuKey = '0_0_0';
    } else if (key === '2') {
      defaultMenuKey = '1_0_0';
    } else if (key === '3') {
      defaultMenuKey = '2_0_0';
    }
    const menuItem = getMenuItemByKey(defaultMenuKey, key);
    if (menuItem) {
      const index = parseInt(menuItem.dataObj) - 1;
      currentList.value = getIconListByTab(key)[index];
    }
  }

  // 切换菜单
  function changeMenu(key) {
    const menuItem = getMenuItemByKey(key, activeTab.value);
    if (menuItem) {
      const index = parseInt(menuItem.dataObj) - 1;
      const iconList = getIconListByTab(activeTab.value);
      console.log(iconList);
      if (iconList && iconList[index]) {
        currentList.value = iconList[index];
        console.log('当前的', index, currentList.value);
      }
    }
  }

  // 根据 key 和 tab 获取对应的菜单项
  function getMenuItemByKey(key, tabKey) {
    let menuList;
    if (tabKey === '1') {
      menuList = menuList1;
    } else if (tabKey === '2') {
      menuList = menuList2;
    } else if (tabKey === '3') {
      menuList = menuList3;
    }
    return menuList.find((item) => item.key === key);
  }

  // 根据 tab 获取对应的图标列表
  function getIconListByTab(tabKey) {
    if (tabKey === '1') {
      return iconList1;
    } else if (tabKey === '2') {
      return iconList2;
    } else if (tabKey === '3') {
      return iconList3;
    }
    return [];
  }

  // 获取默认的 menu 选中项
  function getDefaultMenuKeys(tabKey) {
    if (tabKey === '1') {
      return ['0_0_0'];
    } else if (tabKey === '2') {
      return ['1_0_0'];
    } else if (tabKey === '3') {
      return ['2_0_0'];
    }
    return [];
  }

  const props = defineProps({
    value: {
      type: [String, Number, Array, Object],
      default: '',
    },
    fieldProps: {
      type: Object,
      default: () => ({}),
    },
    placeholder: {
      type: String,
      default: '请选择菜单图标',
    },
    // 其他可能的属性，根据实际情况添加
  });

  const emit = defineEmits(['update:value', 'change']);
  const selectedValue = ref(props.value);
  watch(
    () => props.value,
    (newVal) => {
      selectedValue.value = newVal;
    },
    {
      deep: true,
      immediate: true,
    }
  );
  const iconOptions = [
    {
      label: 'IconArrowDown',
    },
    {
      label: 'IconArrowFall',
    },
  ];

  const getIconLabel = (value) => {
    const icon = iconOptions.find((i) => i.value === value);
    return icon ? icon.label : '';
  };

  // 选择图标时更新 selectedValue 并触发事件
  const selectIcon = (value) => {
    selectedValue.value = value;
    emit('update:value', value);
    emit('change', value);
    showProp.value = false;
  };

  // 监听 props 变化，进行初始化
  watch(
    () => props,
    () => {
      activeTab.value = '1';
      const defaultMenuKeys = getDefaultMenuKeys('1');
      // 这里假设你的 a-menu 组件有方法可以设置默认选中项，具体方法名根据实际情况调整
      // 比如如果 a-menu 有 setDefaultSelectedKeys 方法
      // menuRef.value.setDefaultSelectedKeys(defaultMenuKeys);

      // 手动触发更新 currentList 的逻辑
      const defaultMenuKey = '0_0_0';
      const menuItem = getMenuItemByKey(defaultMenuKey, '1');
      if (menuItem) {
        const index = parseInt(menuItem.dataObj) - 1;
        currentList.value = getIconListByTab('1')[index];
      }
    },
    { deep: true }
  );

  // 组件挂载时进行初始化
  onMounted(() => {
    activeTab.value = '1';
    const defaultMenuKey = '0_0_0';
    const menuItem = getMenuItemByKey(defaultMenuKey, '1');
    if (menuItem) {
      const index = parseInt(menuItem.dataObj) - 1;
      currentList.value = getIconListByTab('1')[index];
    }
  });

  function showPop() {
    activeTab.value = '1';
    const defaultMenuKey = '0_0_0';
    const menuItem = getMenuItemByKey(defaultMenuKey, '1');
    if (menuItem) {
      const index = parseInt(menuItem.dataObj) - 1;
      currentList.value = getIconListByTab('1')[index];
    }
  }
</script>

<style lang="less" scoped>
  .icon-option {
    cursor: pointer;
  }
  .iconContent {
    width: 600px;
    height: 460px;
    overflow-y: auto;
  }
  :deep(.arco-popover-popup-content) {
    padding: 0 !important;
  }

  :deep(.arco-menu-collapse-button) {
    display: none !important;
  }
  :deep(.arco-tabs-content) {
    padding-top: 0px !important;
  }
  .item {
    transition: transform 0.6s ease;
    &:hover {
      color: #165dff;
      .icon {
        transform: scale(1.6);
      }
    }
  }
</style>
